<template>
	<view class="order">

		<view class="order_list">
			<view v-if="pageTempListCopy.length>0" class="">
				<view v-for="(item,index) in pageTempListCopy" :key="index"
					@tap="skip(`/pages/newOrder/index?orderIdSale=${item.orderIdSale}&type=1&cid=${item.cid}`)"
					class="order_list_item">
					<view class="order_list_item_left">
						<view class="order_list_item_left_top">
							<text class="order_list_item_left_top_l"> {{item.cname}}</text>
							<text style="color: black;" class="order_list_item_left_top_r">{{item.orderDay}}</text>
						</view>
						<view class="order_list_item_left_buttom">
							<text>金额:{{item.orderAmt - item.returnAmt  | unifyNumber}}</text>
							<text>出货量:{{item.orderNum}}</text>
							<text>退货量:{{item.returnNum}}</text>

						</view>
					</view>
					<view class="order_list_item_right">
						<image mode="aspectFit" :src="resBaseUrl+'user/right.png'" alt="" />
					</view>
				</view>
			</view>
			<view v-else><u-divider textSize="34" text="暂无数据"></u-divider></view>

		</view>
		<u-popup :show="show" mode="bottom" :round="20" @close="close" @open="open">
			<view class="toast">
				<view class="form">
					<view class="select">
						<view class="text">
							<text>*</text>客户:
						</view>
						<input type="text" placeholder="123123">
					</view>
					<view class="select">
						<view class="text">
							<text>*</text>订单日期（不填）:
						</view>
						<view class="input">
							<input type="text" placeholder="123123"><text>到</text><input type="text"
								placeholder="123123">
						</view>
					</view>
					<view class="select">
						<view class="text">
							<text>*</text>退货量（不填）:
						</view>
						<input type="text" placeholder="123123">
					</view>
					<view class="select">
						<view class="text">
							<text>*</text>总金额（不填）:
						</view>
						<input type="text" placeholder="123123">
					</view>
				</view>
				<view class="btn">
					<button @tap="search">查询</button>
					<button>清空查询数据</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				pageTempList: [],
				pageTempListCopy: [],
				user: '',
				pageNo: 1,
				pageSize: 10
			}
		},
		methods: {
			getList(query) {

				this.$api.pageTempListApi({
					data: query
				}).then((res) => {
					if (res.code == 200) {
						this.pageTempList = [...res.result.list];
						this.pageTempListCopy = this.pageTempList;
						// console.log(this.orderListCopy);
					}
				});
			}

		},
		onShow() {
			this.getList({
				pageSize: 10,
				pageNo: 1
			})
		},
		onReachBottom() {

			if (this.pageTempList.length == this.pageSize * this.pageNo) {
				this.pageNo++;
				this.$api.pageTempListApi({
					data: {
						pageSize: 10,
						pageNo: this.pageNo
					}
				}).then((res) => {
					if (res.code == 200) {
						this.pageTempList = [...this.pageTempList, ...res.result.list];
						this.pageTempListCopy = this.pageTempList;
					}
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f1f1f1;
	}

	.order {
		background-color: #f1f1f1;
		padding: 26rpx;
		height: 100vh;

		.toast {
			padding: 16rpx 49rpx;
			border-radius: 29rpx;

			.btn {
				display: flex;
				justify-content: space-around;
				padding: 30rpx 0;

				button {
					margin-left: 0;
					margin-right: 10rpx;
					width: 288rpx;
					height: 97rpx;
					line-height: 97rpx;
					border-radius: 49rpx;
					border: 1px solid #000;
				}
			}

			.form {
				border-bottom: 1px solid #f1f1f1;
				padding-bottom: 30rpx;

				.select {
					text-indent: 1em;

					.text {
						margin: 20rpx 0;
						color: #BDBDBD;

						text {
							color: #FE3430;
						}
					}

					input {
						height: 94rpx;
						background: #F2F2F2;
						border-radius: 47rpx;
					}

					.input {
						display: flex;
						align-items: center;
						justify-content: space-between;

						input {
							width: 271rpx;
						}

						text {
							text-align: left;
						}
					}
				}
			}
		}

		.header_btn {
			display: flex;

			button {
				height: 58rpx;
				line-height: 58rpx;
				background: #fe3430;
				border-radius: 49rpx;
				color: #fff;
				margin-left: 0;
				margin-right: 10rpx;
			}
		}

		.order_list {
			.order_list_item {
				padding: 28rpx 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				border-radius: 20rpx;
				margin-top: 20rpx;

				.order_list_item_left {
					width: 92%;
					color: #BDBDBD;

					.order_list_item_left_top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 24rpx;

						.order_list_item_left_top_l {
							font-size: .9375rem;
							font-weight: 600;
							color: #000;
						}
					}

					.order_list_item_left_buttom {
						text {
							margin-right: 20rpx;
						}
					}
				}

				.order_list_item_right {
					image {
						width: 12rpx;
						height: 24rpx;
					}
				}
			}
		}
	}
</style>
